<template>
  <div class="bg">
    <nav-com
      :title="$t('sportcontentTitle')"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="top-view1">
        <!--          地图-->
        <div class="swiper-rong">
          <div  class="swiper-rong-neibu">
            <div class="swiper-items">
              <div class="swiper-item-flex" :style="{'background':'url('+sportcontentinfo.fulllineimg+') no-repeat',    'background-position-x': 'center', 'background-position-y': 'center','background-size': '100%'}">
<!--                <img :src="sportcontentinfo.fulllineimg" alt="" style="width: 100%;height: 100%;" align="middle">-->
              </div>
            </div>
          </div>
        </div>
<!--      信息-->
      <van-cell-group inset class="m-b-10 m-t-10 teshu">
        <van-cell inset is-link >
          <van-row class="item-content">
            <van-col span="8">{{ sportcontentinfo.startdate }}</van-col>
            <van-col span="14">
              {{ sportcontentinfo.stend }}
            </van-col>
          </van-row>
        </van-cell>
        <div class="group-item">
          <div class="group-item-top">
            <div class="group-item-left">
              <div><img src="../../assets/management/bianzu@2x.png" alt=""></div>
              <div class="management_name">{{ $t('qidian') }}:</div>
            </div>
            <div class="group-item-right">
              {{sportcontentinfo.user_post}}
            </div>
          </div>
          <div class="group-item-top">
            <div class="group-item-left">
              <div><img src="../../assets/management/bianzu36@2x.png" alt=""></div>
              <div class="management_name">{{ $t('zhongdian') }}:</div>
            </div>
            <div class="group-item-right">
              {{sportcontentinfo.end_post}}
            </div>
          </div>
          <div class="group-item-content">
            <div class="group-item-content-flex">
              <div><img class="icon-small" src="../../assets/management/bianzu7@2x.png" alt=""></div>
              <div>{{ sportcontentinfo.mileage }}</div>
            </div>
            <div class="group-item-content-flex">
              <div><img class="icon-small" src="../../assets/management/bianzu6@2x.png" alt=""></div>
              <div>{{ sportcontentinfo.timelength }}</div>
            </div>
            <div class="group-item-content-flex">
              <div><img class="icon-small" src="../../assets/management/bianzu3@2x.png" alt=""></div>
              <div>{{ sportcontentinfo.num }}</div>
            </div>
<!--            <div  class="group-item-content-flex">-->
<!--              <div><img class="icon-small" src="../../assets/management/bianzu34@2x.png" alt=""></div>-->
<!--              <div>{{ sportcontentinfo.calories }}</div>-->
<!--            </div>-->
          </div>
        </div>
      </van-cell-group>
        <!-- echart -->
      <van-cell-group inset class="m-b-10 m-t-10 teshu">
          <van-cell inset >
            <van-row class="item-content" justify="space-between" align="center">
              <van-col span="10" class="qixingtitle-chart">{{ $t('gaodu') }}</van-col>
              <van-col span="14" class="qixingtitle-chart qixingtitle-chart-right">{{ $t('leiji')+':'+sportcontentinfo.highly.climb}}</van-col>
            </van-row>
          </van-cell>
          <div class="group-item-chart" v-if="chartdata.length>0">
            <chart-item :index="0" :chartdata="chartdata" :chartdatax="chartdatax"></chart-item>
          </div>
        </van-cell-group>
      <van-cell-group inset class="m-b-10 m-t-10 teshu">
        <van-cell inset >
          <van-row class="item-content" justify="space-between" align="center">
            <van-col span="10" class="qixingtitle-chart">{{ $t('sudu') }}</van-col>
            <van-col span="14" class="qixingtitle-chart qixingtitle-chart-right">{{ $t('unit')+':'+sportcontentinfo.speed.unit }}</van-col>
          </van-row>
        </van-cell>
        <div class="group-item-chart" v-if="chartdataspeed.length>0">
          <chart-item :index="1" :chartdata="chartdataspeed" :chartdatax="chartdataspeedx"></chart-item>
        </div>
      </van-cell-group>
      <van-cell-group inset class="m-b-10 m-t-10 teshu">
        <van-cell inset >
          <van-row class="item-content" justify="space-between" align="center">
            <van-col span="10" class="qixingtitle-chart">{{ $t('xinlv') }}</van-col>
            <van-col span="14" class="qixingtitle-chart qixingtitle-chart-right">{{ $t('unit')+':'+sportcontentinfo.heart.unit }}</van-col>
          </van-row>
        </van-cell>
        <div class="group-item-chart" v-if="chartdataXinlv.length>0">
          <chart-item :index="2" :chartdata="chartdataXinlv" :chartdatax='chartdataXinlvx'></chart-item>
        </div>
      </van-cell-group>
      <!-- 两端对齐 -->
      <van-cell-group inset class="m-b-10 m-t-10 teshu">
        <van-cell inset >
          <van-row class="item-content">
            <van-col span="24" class="qixingtitle">{{ $t('zongheshuju') }}</van-col>
          </van-row>
        </van-cell>
        <div class="group-item">
          <div class="group-item-content-teshu">
            <div class="group-item-content-flex">
              <div>{{ sportcontentinfo.overall.uniform }}</div>
              <div class="group-item-content-flex-shuliang">
                <div><img class="icon-small" src="../../assets/drive/bianzu13@3x.png" alt=""></div>
                <div>{{ $t('jusu') }}</div>
              </div>

            </div>
            <div class="group-item-content-flex">
              <div>{{ sportcontentinfo.overall.climb }}</div>
              <div class="group-item-content-flex-shuliang">
                <div><img class="icon-small" src="../../assets/drive/bianzu8@3x.png" alt=""></div>
                <div>{{ $t('pasheng') }}</div>
              </div>

            </div>
            <div class="group-item-content-flex">
              <div>{{ sportcontentinfo.overall.mileage }}</div>
              <div class="group-item-content-flex-shuliang">
                <div><img class="icon-small" src="../../assets/drive/bianzu10@3x.png" alt=""></div>
                <div>{{ $t('licheng') }}</div>
              </div>
            </div>
<!--            <div  class="group-item-content-flex">-->
<!--              <div>{{ sportcontentinfo.overall.calories}}</div>-->
<!--              <div class="group-item-content-flex-shuliang">-->
<!--                <div><img class="icon-small" src="../../assets/drive/bianzu18@3x.png" alt=""></div>-->
<!--                <div>{{ $t('kaluli') }}</div>-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </div>
        <div class="group-item">
          <div class="group-item-content-teshu">
<!--            <div class="group-item-content-flex" style="">-->
<!--              <div>{{ sportcontentinfo.overall.number }}</div>-->
<!--              <div class="group-item-content-flex-shuliang">-->
<!--                <div><img class="icon-small" src="../../assets/drive/bianzu19@3x.png" alt=""></div>-->
<!--                <div>{{ $t('guijibianhao') }}</div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="group-item-content-flex" style="flex:1">-->
<!--              <div>{{ sportcontentinfo.overall.average }}</div>-->
<!--              <div class="group-item-content-flex-shuliang">-->
<!--                <div><img class="icon-small" src="../../assets/drive/bianzu13@3x.png" alt=""></div>-->
<!--                <div>{{ $t('junsuyundong') }}</div>-->
<!--              </div>-->
<!--            </div>-->
            <div class="group-item-content-flex" style="flex: 1">
              <div>{{ sportcontentinfo.overall.entire }}</div>
              <div class="group-item-content-flex-shuliang">
                <div><img class="icon-small" src="../../assets/drive/bianzu13@3x.png" alt=""></div>
                <div>{{ $t('quanchengyunsu') }}</div>
              </div>
            </div>
            <div  class="group-item-content-flex" style="flex: 1;justify-content: flex-start">
              <div>{{ sportcontentinfo.overall.fastest }}</div>
              <div class="group-item-content-flex-shuliang">
                <div><img class="icon-small" src="../../assets/drive/bianzu14@3x.png" alt=""></div>
                <div>{{ $t('zuikuaisudu') }}</div>
              </div>
            </div>
          </div>
<!--          <div class="group-item-content-teshu">-->

<!--          </div>-->
        </div>
<!--        <div class="group-item">-->
<!--          <div class="group-item-content-teshu">-->
<!--            <div class="group-item-content-flex">-->
<!--              <div>{{ sportcontentinfo.overall.cumulativeRise }}</div>-->
<!--              <div class="group-item-content-flex-shuliang">-->
<!--                <div><img class="icon-small" src="../../assets/drive/bianzu12@3x.png" alt=""></div>-->
<!--                <div>{{ $t('leijishangsheng') }}</div>-->
<!--              </div>-->

<!--            </div>-->
<!--            <div class="group-item-content-flex">-->
<!--              <div>{{ sportcontentinfo.overall.cumulativeLow }}</div>-->
<!--              <div class="group-item-content-flex-shuliang">-->
<!--                <div><img class="icon-small" src="../../assets/drive/bianzu6@3x.png" alt=""></div>-->
<!--                <div>{{ $t('leijixiajiang') }}</div>-->
<!--              </div>-->

<!--            </div>-->
<!--&lt;!&ndash;            <div class="group-item-content-flex">&ndash;&gt;-->
<!--&lt;!&ndash;              <div>{{ sportcontentinfo.overall.totalcalories }}</div>&ndash;&gt;-->
<!--&lt;!&ndash;              <div class="group-item-content-flex-shuliang">&ndash;&gt;-->
<!--&lt;!&ndash;                <div><img class="icon-small" src="../../assets/drive/bianzu18@3x.png" alt=""></div>&ndash;&gt;-->
<!--&lt;!&ndash;                <div>{{ $t('kaluli') }}</div>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--          </div>-->
<!--        </div>-->
        <div class="group-item">
          <div class="group-item-top">
            <div class="group-item-left">
              <div><img src="../../assets/drive/bianzu7@3x.png" alt=""></div>
              <div class="management_name">{{ $t('kaishitime') }}:</div>
            </div>
            <div class="group-item-right group-item-right-time">
              {{ sportcontentinfo.createtime }}
            </div>
          </div>
          <div class="group-item-top">
            <div class="group-item-left">
              <div><img src="../../assets/drive/bianzu9@3x.png" alt=""></div>
              <div class="management_name">{{ $t('jieshutime') }}:</div>
            </div>
            <div class="group-item-right group-item-right-time">
              {{ sportcontentinfo.updatetime }}
            </div>
          </div>
        </div>
      </van-cell-group>
      <div  class='fatSubmit'>
        <van-button round type="info" class="fatSubmit_yanse" block @click="addroutes">{{ $t('addlvxian') }}</van-button>
      </div>
      </div>
  </div>
</template>
<script>
import navCom from '@/components/nav-com.vue'
import chartItem from '@/components/chart.vue'
import {
  returnData
} from '@/utils/day.js'
import { cyclingDetail } from '../../api/deviceManagement'
export default {
  name: 'bonusList',
  components: {
    navCom,
    chartItem
  },
  data () {
    return {
      id: '',
      chartdata: [],
      chartdatax: [],
      chartdataXinlv: [],
      chartdataXinlvx: [],
      chartdataspeed: [],
      chartdataspeedx: [],
      date: returnData(new Date()),
      showrili: false,
      active: 0,
      searchValue: '',
      checked: true,
      showView: true,
      title: '骑行日历',
      showPage: true,
      lichengValue: '',
      swiperData: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg'
      ],
      sportcontentinfo: {}
    }
  },
  mounted () {
    this.id = this.$route.query.canshu || '1'
    this.init()
  },
  methods: {
    addroutes () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.addRoute(this.id)
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('addRoute', { id: this.id }, res => {})
      }
    },
    clickCurrentDay (date) {
      console.log('========date', date)
      this.date = date.data
      this.showrili = false
    },
    jumpTo (url) {
      this.$router.push(url)
    },
    onPageConfirm () {

    },
    // 返回
    backHandler () {
      this.$router.go(-1)
    },
    clearHistory () {
      this.$toast('清理缓存成功')
    },
    // 初始化
    init () {
      cyclingDetail({ id: this.id }).then((res) => {
        if (res.code == 1) {
          this.sportcontentinfo = res.data.detail
          this.chartdata = res.data.detail.highly.data
          this.chartdatax = res.data.detail.highly.x
          this.chartdataspeed = res.data.detail.speed.data
          this.chartdataspeedx = res.data.detail.speed.x
          this.chartdataXinlv = res.data.detail.heart.data
          this.chartdataXinlvx = res.data.detail.heart.x
        }
      })
    },
    onSearch () {

    }
  }
}
</script>
<style lang="scss" scoped>
.top-view1{
  margin-top: 26.23vw;
}
.m-t-16{
  margin-top: 13.33vw;
}
.bg{
  background: #F8F8F8;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 10px;
}
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
.teshu{
}
.search_btn{
  width: 56px;
  background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.van-search__action{
  padding: 0;
}
.van-search{
  padding: 0;
}
.top-title{
  color: #fff;
  .title{
    padding: 0rem 0rem 0px 0.42667rem;
    font-size: 22px;
    font-family:PingFang, PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
  }
  .sub-title{
    padding: 0rem 0rem 0px 0.42667rem;
    font-size: 16px;
    font-family:PingFang, PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-top: 10px;
  }
  .right-img{
    width: 135px;
  }
}
.wenti{
  font-size: 22px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #303030;
  margin: 0px 0.42667rem;
  border-bottom: 0.02667rem solid #ebedf0;
  padding: 10px 0 15px;
}
.group-item{
  display: flex;
  flex-direction: column;
  padding:0 15px 15px;
  .group-item-top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 10px;
    &:first-child{
      padding: 10px 0;
    }
    .group-item-left{
      display: flex;
      align-items: center;
      div{
        display: flex;
        align-items: center;
      }
      img{
        width: 15px;
        margin-right: 10px;
      }
      .management_name{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #303030;
      }
    }
    .group-item-right{
      display: flex;
      justify-content: flex-start;
      width: 77%;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #303030;
    }
    .group-item-right-time{
      width: 69%;
    }
  }
  .group-item-content{
    border-top: 0.02667rem solid #ebedf0;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .group-item-content-flex{
      display: flex;
      align-items: center;
      .icon-small{
        width: 15px;
        margin-right: 4px;
      }
      div{
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #808080;
      }
    }
    .group-item-content-right{
      text-align: right;
    }
  }
  .group-item-content-teshu{
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .group-item-content-flex{
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      div{
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
      .group-item-content-flex-shuliang{
        padding-top: 5px;
        display: flex;
        align-items: center;
        .icon-small{
          width: 15px;
          margin-right: 4px;
        }
        div{
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #808080;
          display:flex;
          height: 15px;
          align-items: center;
        }
      }
    }
    .group-item-content-right{
      text-align: right;
    }
  }
}
.group-item-chart{
  height: 215px;
}
.item-content{
  width: 100%;
  display: flex;
  align-items: center;
}
.van-search__content {
  background-color: #EEEEEE;
}
::v-deep .van-tabs__nav{
  border-bottom: 1px solid #fafafa!important;
  border-top: 1px solid #fafafa!important;
}
::v-deep .van-tabs__line {
  bottom: 0.6rem;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  height: 1.333rem;
}
.swiper-rong{
  .swiper-rong-neibu{
    white-space: nowrap;
    display: flex;
    height: 190px;
    overflow: hidden;
    .swiper-items{
      display: inline-block;
      width: 90%;
      height: 190px;
      padding: 0px;
      background: #fff;
      flex: 1;
      .swiper-item-flex{
        display: flex;
        height: 190px;
        .swiper-item-left{
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          .swiper-name{
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #0AD39F;
          }
          .swiper-subname{
            font-size: 16px;
            font-family: Helvetica;
            color: #303030;
          }
          .btns{
            background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
            box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
            border-radius: 6px;
            color: #ffffff;
            font-size: 18px;
            padding: 6px 17px;
          }
        }
        .swiper-item-right{
          width: 110px;
          height: 110px;
        }
      }
    }
    .swiper-items-rili{

    }
  }
}
.qixingtitle{
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #303030;
}
.qixingtitle-chart{
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #303030;
}
.qixingtitle-chart-right{
  text-align: right;
}
.qixingtitlerili{
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 500;
  color: #303030;
  display: flex;
  align-items: center;
  height: 100%;
}
.closed-icon{
  position: fixed;
  bottom: 3rem;
  left: 45%;
  z-index: 5001;
}
::v-deep .van-tab{
  font-size: 16px;
}
.fatSubmit{
  padding: 0.3rem 0rem 10px;
  margin: 0 0.42667rem;
  .fatSubmit_yanse{
    border: 0px!important;
    background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
    box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
    font-size: 18px!important;
    font-weight: 600;
  }

}
</style>
